<template>
	<view class="container-myteam">
		<view class="login-top">
			<view class="login-top-view">
				<view class="login-top-back">
					<uni-icons color="#fff" type="left" size="26" @click="back"></uni-icons>
				</view>
				<view class="login-top-text">
					{{$t('我的团队')}}
				</view>
				<view class="login-top-lang">
					<image src="../../static/my/12.png" class="loginlang" @click="erweiCode"></image>
				</view>
			</view>
			<view class="reward-view">
				<view class="">
					<image src="../../static/my/15.png" class="width36"></image>
				</view>
				<view class="reward-text">
					{{$t('奖励介绍')}}
				</view>
				<view class="">
					<image src="../../static/my/16.png"  class="width36"></image>
				</view>
			</view>
			<view class="colorwhite">
				<p>{{$t('一级会员充值，奖励')}}{{datas.user.yj_rate}}%</p>
				<p>{{$t('二级会员充值，奖励')}}{{datas.user.ej_rate}}%</p>
				<p>{{$t('三级会员充值，奖励')}}{{datas.user.sj_rate}}%</p>
			</view>
		</view>
		<view class="user_top_view">
			<view class="user_top">
				<view  class="user_detail">
					<view  class="user_header">
						<img  src="../../static/my/user.png" style="width:100%;height:100%">
					</view>
					<span class="userName">{{datas.user.username}}</span>
				</view>
				<view  class="user_balance">
					<p class="rewardText">{{$t('总奖励')}}</p>
					<p class="rewardNum">{{datas.total_money}}</p>
				</view>
				<view class="user_team">
					<p>{{$t('团队')}}:<span>{{datas.total_num}}</span>(人)</p>
					<p>{{$t('业绩')}}:<span>{{datas.yj_num}}</span></p>
				</view>
				<view class="user_share">
					<p>{{$t('邀请链接')}}:{{datas.share_url}}</p>
					<p @click="copy">{{$t('复制')}}</p>
				</view>
			</view>
		</view>
		<view class="head-nav">
				<view class="padding12" :class="navIndex==0?'activite':''" @click="checkIndex(0)">{{$t('一级')}}({{datas.level_user.level1.length}})</view>
				<view class="padding12"  :class="navIndex==1?'activite':''" @click="checkIndex(1)">{{$t('二级')}}({{datas.level_user.level2.length}})</view>
				<view class="padding12"  :class="navIndex==2?'activite':''" @click="checkIndex(2)">{{$t('三级')}}({{datas.level_user.level3.length}})</view>			
		</view>
		<view class="content" v-if="navIndex==0">
			<view v-if="datas.level_user.level1.length==0" class="nodetaView">
				<image src="../../static/home/nodeta.png" class="nodetaImg"></image>
				<p class="nodetaText">{{$t('暂无数据')}}</p>
			</view>
			<view v-else class="">
				<view class="content-view" v-for="(item,index) in datas.level_user.level1">
					<view  class="item-list">
						<view  class="de_wrap">
							<p  class="tit">
								<span>{{item.username}}</span>
							<!-- <span>111</span> -->
							</p>
							<p  class="time">{{item.create_at}}</p>
						</view>
						<view class="price">VIP<span>{{item.level}}</span></view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="navIndex==1">
			<view v-if="datas.level_user.level2.length==0" class="nodetaView">
				<image src="../../static/home/nodeta.png" class="nodetaImg"></image>
				<p class="nodetaText">{{$t('暂无数据')}}</p>
			</view>
			<view v-else class="">
				<view class="content-view" v-for="(item,index) in datas.level_user.level2">
					<view  class="item-list">
						<view  class="de_wrap">
							<p  class="tit">
								<span>{{item.username}}</span>
							<!-- <span>111</span> -->
							</p>
							<p  class="time">{{item.create_at}}</p>
						</view>
						<view class="price">VIP<span>{{item.level}}</span></view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="navIndex==2">
			<view v-if="datas.level_user.level3.length==0" class="nodetaView">
				<image src="../../static/home/nodeta.png" class="nodetaImg"></image>
				<p class="nodetaText">{{$t('暂无数据')}}</p>
			</view>
			<view v-else class="">
				<view class="content-view" v-for="(item,index) in datas.level_user.level3">
					<view  class="item-list">
						<view  class="de_wrap">
							<p  class="tit">
								<span>{{item.username}}</span>
							<!-- <span>111</span> -->
							</p>
							<p  class="time">{{item.create_at}}</p>
						</view>
						<view class="price">VIP<span>{{item.level}}</span></view>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<uni-popup ref="popup">
				<view class="popup-content" type="center">
					<view class="share_inner">
						<view class="white_bg">
							<view>
								<uqrcode ref="uqrcode" canvas-id="address" :value="datas.share_url" :options="{ margin: 5,start:false,canvasId:'sadas',size:120 }" :size="206" @complete="wc"></uqrcode>
							</view>
							
							<!-- <image src="../../static/my/13.png" class="erweiCode"></image> -->
							
						</view>
						<view  class="basic_btn" @click="baocun">{{$t('保存图片')}}</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navIndex: 0,
				lv0:[],
				lv1:[],
				lv2:[],
				datas:{}
			}
		},
		onLoad() {
			this.getinfo()
		},
		methods:{
			wc(e){
				console.log(e)
			},
			baocun(){
				// this.$refs.uqrcode.save({
				//   success: () => {
				//     uni.showToast({
				//       icon: 'success',
				//       title: this.$t('保存成功')
				//     });
				//   }
				// });
				this.$refs.uqrcode.toTempFilePath({
				  success: res => {
					  console.log(res.errMsg)
					  if(res.errMsg == 'canvasToTempFilePath:ok'){
						  //导出成功，保存
						  // res.tempFilePath
						  uni.saveFile({
							tempFilePath: res.tempFilePath, // 将路径传递给tempFilePath
							success: function(saveRes) {
							  console.log('文件保存成功', saveRes.savedFilePath);
								
								  },
							fail: function(err) {
							  console.log('文件保存失败', err);
							}
						});
					  }
						
				  }
				});
			},
			copy(){
				uni.setClipboardData({
				  data:this.datas.share_url,//要被复制的内容
				  success:()=>{//复制成功的回调函数
					uni.showToast({//提示
					  title:this.$t("复制成功"),
					  icon:'success'
					})
				  }
				},true);
			},
			getinfo(){
				this.$http.get(
					'api/user/teams',//接口名
					{},//参数合集
					{},
					false
				).then(res=>{
					this.datas = res.data
					console.log(res.data)
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
			erweiCode(){
				this.$refs.popup.open('center')
			},
		}
	}
</script>

<style scoped> 
	.price{
	    flex: 1;
	    font-size: 20px;
	    line-height: 28px;
	    font-weight: 700;
	    text-align: right;
	    color: #f12211;
	    white-space: nowrap;
	}
	.price2{
	    flex: 1;
	    font-size: 20px;
	    line-height: 28px;
	    font-weight: 700;
	    text-align: right;
	    color: green;
	    white-space: nowrap;
	}
	.time{
		font-size: 12px;
		color: rgba(0, 0, 0, .8);
		line-height: 17px;
		margin-top: 10px
	}
	.tit{
	    font-size: 14px;
	    color: rgba(0, 0, 0, .8);
	    line-height: 20px;
	    font-weight: 700;
	}
	.de_wrap{
		flex:2;
	}
	.item-list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 8px;
		border-bottom: 1px solid #ececec;
	}
	.container-myteam{
		background-color: #f6f6f6;
	}
	.login-top{
		width:100%;
		height:500rpx;
		background: url('../../static/my/11.png') no-repeat 50%;
		background-size: 100% 100%;	
		border-radius: 0 0 20% 20%;
	}
	.login-top-view{
		display: flex;
		height:88rpx;
		line-height: 88rpx;
	}
	.login-top-back{
		margin-left:20rpx;
	}
	.login-top-back,.login-top-lang{
		width:20%;
	}
	.login-top-lang{
		text-align: right;
	}
	.login-top-text{
		width:60%;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}
	.loginlang{
		width:72rpx;
		height:72rpx;
		vertical-align: middle;
	}
	.reward-view{
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 35rpx;
		line-height: 50rpx;
		color: #fff;
		margin-bottom:10rpx;
	}
	.width36{
		width:72rpx;
		height:20rpx;
	}
	.colorwhite{
		color: hsla(0, 0%, 100%, .8);
		text-align: center;
		font-size: 28rpx;
	}
	.colorwhite p{
		line-height: 40rpx;
	}
	.reward-text{
		font-size: 34rpx;
		font-weight: 600;
		margin-left:20rpx;
		margin-right:20rpx;
	}
	.user_top{
		width: 96%;
		position: relative;
		top: -160rpx;
		background: #fff;
		left: 2%;
		border-radius: 10rpx;
		padding: 30rpx 0;
	}
	.user_top .user_detail{
	    display: flex;
	    justify-content: space-between;
	    text-align: center;
	}
	.user_header{
		width: 140rpx;
		height: 140rpx;
		overflow: hidden;
		border-radius: 50%;
		position: absolute;
		top: -70rpx;
	}
	.userName{
		margin-left: 170rpx;
		font-size: 32rpx;
		font-weight: 700;
	}
	.user_balance{
		text-align: center;
		margin-top: 40rpx;
	}
	.rewardNum{
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 36rpx;
		color: red;
	}
	.user_team{
		display: flex;
		justify-content: space-between;
		text-align: center;
	}
	.user_top .user_team p{
	    width: 50%;
	    margin-top: 40rpx;
	    font-size: 28rpx;
	}
	.user_top .user_team p:first-child {
	    border-right: 1px solid #999;
	}
	.user_top .user_team span{
	    color: red;
	    font-weight: 700;
	}
	.user_top .user_share{
	    display: flex;
	    justify-content: space-between;
	    margin: 40rpx 0 0 0;
	    font-size: 28rpx;
	}
	.user_top .user_share p:first-child {
	    width: 70%;
	    margin-left: 40rpx;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
	    line-height: 56rpx;
	}
	.user_top .user_share p:nth-child(2) {
	    text-align: center;
	    width: 20%;
	    background: #e7544d;
	    color: #fff;
	    padding: 12rpx 0;
	    border-radius: 10rpx;
	    margin-right: 30rpx;
	}
	.rewardText{
		font-size:28rpx;
	}
	.head-nav {
		margin-top:-140rpx ;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:24rpx;
		padding:0 30rpx  30rpx 30rpx;
		height:44rpx;
		line-height: 44rpx;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
	}
	.activite {
		color: #fff;
		background-color: red;
		border-radius: 10rpx;
	}
	.content {
		height: 100%;
	}
	.padding12{
		padding:0 50rpx;
	}
	.nodetaView{
		text-align: center;
		background-color: #f6f6f6;
		padding:64rpx 0;
	}
	.nodetaImg{
		width:320rpx;
		height:320rpx;
	}
	.nodetaText{
		font-size:28rpx;
		color:#969799;
	}
	.share_inner{
		width: 460rpx;
		height: 560rpx;		   
		background: url(../../static/my/14.png) no-repeat 50%;
		background-size: 100% 100%;
	}
	.white_bg{
	   text-align: center;
	   margin: auto;
	   width: 90%;
	   height: 200px;
	}
	.erweiCode{
		width:286rpx;
		height:286rpx;
		margin-top:80rpx;
		margin-bottom:30rpx;
	}
	.basic_btn{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		width: 60%;
		background: linear-gradient(90deg, #e4392e, #ff4d16);
		border-radius: 46rpx;
		color: #fff;
		text-align: center;
		margin:0 auto;
		margin-top: 60rpx;
	}
</style>